<template>
  <div class="content-container">
    <div class="container-content">
      <el-card class="flex-shrink mb-3">
        <el-form :inline="true" :label-position="'top'" :model="lotParams">
          <el-row :gutter="12">
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('carrier-id')">
                <el-input class="item-input" v-model="lotParams.carrierID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-status')">
                <el-input class="item-input" v-model="lotParams.lotStatus" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
            <el-col class="item-col" :span="3">
              <el-form-item :label="$t('lot-id')">
                <el-input class="item-input" v-model="lotParams.lotID" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="row-bg" justify="space-between">
            <el-space :size="size" :spacer="spacer" :span="3">
              <el-radio-group v-model="radio1">
                <el-radio label="1">{{ $t("carrier-id") }}</el-radio>
                <el-radio label="2">Option 2</el-radio>
                <el-radio label="3">Option 2</el-radio>
              </el-radio-group>
              <el-radio-group v-model="radio1">
                <el-radio label="1">{{ $t("carrier-id") }}</el-radio>
                <el-radio label="2">Option 2</el-radio>
                <el-radio label="3" size="large">Option 2</el-radio>
              </el-radio-group>
            </el-space>
            <el-col class="item-col alignment-container" :span="3">
              <el-space>
                <el-button class="inline-button" type="primary" @click="onQuery">{{ $t("query")
                }}</el-button>
                <el-button class="inline-button" type="primary" size="small" @click="onShowFooter">{{ $t("query")
                }}</el-button>
                <el-button class="inline-button" type="primary" size="large" @click="onQuery">{{ $t("query")
                }}</el-button>
                <el-button class="inline-button" type="primary" size="small" @click="openModal">{{ $t("open")
                }}</el-button>
              </el-space>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="flex1 mb-3">
        <vxe-grid ref="xGrid2" v-bind="gridOptions" @edit-disabled="editDisabledEvent">
          <template #name_edit="{ row }">
            <input v-model="row.name" id="row1" />
          </template>
          <template #sex_edit="{ row }">
            <input v-model="row.sex" id="row2" />
          </template>
          <template #age_edit="{ row }">
            <input v-model="row.age" id="row3" />
          </template>
          <template #address_edit="{ row }">
            <input v-model="row.address" id="row4" />
          </template>
        </vxe-grid>
      </el-card>

      <el-card class="flex-shrink">
        <el-lot-detail />
      </el-card>
      <el-dialog v-model="dialogVisible" title="Tips" width="30%" @closed="closeModal">
        <span>弹窗快捷键测试F2</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <FooterPage :methods="methods" @click-event="clickEvent($event)" />
  </div>
</template>
<script setup lang="ts">
import { h, ref, nextTick, onUnmounted } from "vue";
import { ElDivider } from "element-plus";
import { setRefrshFunc } from "@/utils/refreshPageData";
//代码通过ts定义，减少vue文件内的代码逻辑
import { onQuery, lotParams, gridOptions } from "./index";
import { CommonUtils } from "@/utils/common/commonUtil";
import { VxeGridInstance } from "vxe-table";
import {
  registerHotKeys,
  unregisterHotKeys, HotKeyDto
} from "@/utils/hotKeyManager";
const showFooter: Ref<boolean> = ref(true);
const lotID = "";
const size = ref(10);
const xGrid2 = ref({} as VxeGridInstance);
// const xGrid2 = ref({} as VxeGridInstance);
const spacer = h(ElDivider, { direction: "vertical" });
import { onMounted } from "vue";
import { onBeforeUnmount } from "vue";

const methods = [
  {
    buttonName: "cancel", clickEvent: () => {
      console.log('关闭页面');
    },
    hotKey: 'f2'
  },
  {
    buttonName: "confirm", type: true, permission: true,
    beforePermission: () => {
      return true;
    },
    clickEvent: () => {
      console.log('确认提交');
    },
    hotKey: 'f1'
  }
];
let sortable2: any;

const columnDrop = () => {
  sortable2 = CommonUtils.columnDrop(xGrid2);
};
const onShowFooter = () => {
  console.log(showFooter.value);
  showFooter.value = !showFooter.value;
};

let initTime: any;
nextTick(() => {
  // 加载完成之后在绑定拖动事件
  initTime = setTimeout(() => {
    columnDrop();
  }, 500);
});

//清除
onUnmounted(() => {
  clearTimeout(initTime);
  if (sortable2) {
    sortable2.destroy();
  }
});
const editDisabledEvent: VxeGridEvents.EditDisabled = () => {
  console.log("禁止编辑");
};

// 调用接口
const getList = async (): Promise<void> => {
  console.log("lot");
};

const clickEvent = item => {
  console.log(".....", item.buttonName);
};
// init时 缓存当前页面的刷新方法
setRefrshFunc(getList);

const shortCutF1 = () => {
  alert("You have pressed the F1 shortcut key on this Lot Query");
};
const shortCutF2 = () => {
  alert("You have pressed the F2 shortcut key on this modal");
};
const shortCutEnter = () => {
  alert("You have pressed the Enter shortcut key on this Lot Query");
};
const shortCutCtrlA = () => {
  alert("You have pressed the Ctrl+A shortcut key on this Lot Query");
};
const dialogVisible = ref(false);
const openModal = () => {
  dialogVisible.value = true;
  registerHotKeys(
    [{
      key: 'f2',
      callback: () => {
        shortCutF2();
      },
    },],
    true
  );
};
const closeModal = () => {
  unregisterHotKeys(
    true
  );
};
</script>
<style scoped>
@import url("index.scss");
</style>
